<template>
  <div class="research-container">
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">科研成果</h1>
        <div class="title-underline"></div>
        <p class="page-subtitle">Research Achievement</p>
      </div>
    </div>

    <el-tabs v-model="activeTab" class="research-tabs">
      <el-tab-pane label="会议论文" name="papers">
        <div class="paper-list">
          <div v-for="(paper, index) in papers" :key="index" class="paper-item">
            <div class="paper-header">
              <h3 class="paper-title">{{ paper.title }}</h3>
              <img :src="paper.image" class="paper-image" />
            </div>
            <div class="paper-tags">
              <el-tag v-for="(tag, tagIndex) in paper.tags" :key="tagIndex" size="small" type="info" class="tag-item">
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="期刊著作" name="journals">
        <div class="journal-list">
          <div v-for="(journal, index) in journals" :key="index" class="journal-item">
            <div class="journal-header">
              <h3 class="journal-title">{{ journal.title }}</h3>
              <img :src="journal.image" class="paper-image" />
            </div>
            <!-- <div class="journal-authors">
              {{ journal.authors.join(", ") }}
            </div> -->
            <!-- <div class="journal-publication">
              <span class="publisher">{{ journal.publisher }}</span>
            </div>
            <div class="journal-description">
              {{ journal.description }}
            </div> -->
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="专利成果" name="patents">
        <div class="patent-list">
          <div v-for="(patent, index) in patents" :key="index" class="patent-item">
            <div class="patent-header">
              <h3 class="patent-title">{{ patent.title }}</h3>
              <img class="paper-image" :src="patent.image" />
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'ResearchAchievement',
  data() {
    return {
      activeTab: 'papers',
      papers: [
        {
          title: '[1]Peng Zhang, Weimin Lei, Wei Zhang, Xinlei Zhao, ZhiChao Li, Lijia Dong, Zhaonan Lin. A Computer Vision Based Warning and Behavior Analysis System for Large Passenger Flow in Stations[C]. In Proceedings of the 2024 8th International Conference on management engineering, software engineering, and services sciences(ICMSS) , 2024.',
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',

        },
        {
          title: '[2] Peng Zhang, Weimin Lei, Xinlei Zhao, Lijia Dong, Zhaonan Lin. RTVD-Net: An real-time violence detection method based on pre-training of human skeleton images[C]. In Proceedings of the 2023 12th International Conference on Networks, Communication and Computing (ICNCC), 2023.(EI:20241215765041)',
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41598-022-12237-x/MediaObjects/41598_2022_12237_Fig1_HTML.png',

        },
        {
          title: '[3] Peng Zhang, Weimin Lei, Xinlei Zhao, Lijia Dong, Zhaonan Lin. NF-Net: Near and Far Network for Crowd Counting[C]. In Proceedings of the 2023 8th International Conference on Computer and Communication Systems (ICCCS), 2023. (EI:20232914402328) ',
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41586-025-09544-4/MediaObjects/41586_2025_9544_Fig1_HTML.png',
        },
      ],
      journals: [
        {
          title: '[1] 张鹏, 雷为民, 赵新蕾, 董丽嘉, 林兆楠, 景庆阳. 跨摄像头多目标跟踪方法综述[J].计算机学报,2024,47(02):287-309. （EI：20240615532462）',
          // authors: ['张三', '李四', '王五'],
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',
        },
        {
          title: '[2] Peng Zhang, Weimin Lei, Xinlei Zhao, Lijia Dong and Zhaonan Lin. An Adaptive Multi-Scale Network Based on Depth Information for Crowd Counting[J]. Sensors. 2023; 23(18):7805. (SCI, JCR Q2 WOS:001072602200001) ',
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',
        },
        {
          title: '[3] Peng Zhang, Lijia Dong, Xinlei Zhao, Weimin Lei. An end-to-end framework for real-time violent behavior detection based on 2D CNNs [J]. Journal of Real-Time Image Processing, 2024, 21(2): 57.(SCI, JCR Q3 WOS:001190949700001) ',
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',
        },

        {
          title: '[4] Peng Zhang, Siqi Wang, Wei Zhang, Weimin Lei, Xinlei Zhao, Qingyang Jing, Mingxin Liu. Cross-Camera Tracking Model and Method Based on Multi-Feature Fusion[J]. Symmetry, 2023, 15(12): 2145. (SCI, JCR Q2 WOS: 001131289300001)',
          // authors: ['周九', '吴十', '郑一'],
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',          // journal: '计算机研究与发展',
          // volume: '59',
          // issue: '12',
          // pages: '2567-2580',
          // tags: ['区块链', '供应链', '分布式系统']
        },
        {
          title: '[5] Peng Zhang, Qingyang Jing, Xinlei Zhao, Lijia Dong, Weimin Lei, Wei Zhang, Zhaonan Lin. A Multi-Object Tracking Approach Combining Contextual Features and Trajectory Prediction[J]. Electronics, 2023, 12(23):4720. (SCI, JCR Q3 WOS:001116010200001) ',
          // authors: ['王五', '赵六', '孙七'],
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',
        },
        {
          title: '[6] Peng Zhang, Xinlei Zhao, Lijia Dong, Weimin Lei, Wei Zhang, Zhaonan Lin. A framework for detecting fighting behavior based on key points of human skeletal posture[J].Computer Vision and Image Understanding,2024. (SCI,JCR 二区,CCF B)',
          // authors: ['张三', '李四', '王五'],
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',
        },
        {
          title: '[7]Dong, K., Li, D., Zhang, J. et al. RV-YOLO: real-time object detection algorithm for rail transit platform scenarios. J Real-Time Image Proc 22, 143 (2025)',
          // authors: ['张三', '李四', '王五'],
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',
        },
        {
          title: '[8] 张鹏.基于WebRTC的视频会议系统的设计与实现[J].中国新通信,2018,20(01):104-105.',
          // authors: ['张三', '李四', '王五'],
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',
        },
      ],
      patents: [
        {
          title: '[1] 张鹏等. 一种基于多目标跟踪的行人逆行判断方法:CN202410354175.6[P]. 2024-06-11.',
          // inventors: ['张三', '李四'],
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',
          // number: 'ZL202310123456.7',
          // status: '已授权'
        },
        {
          title: '[2] 张鹏等. 一种基于目标检测和级联匹配的人流量统计方法:CN202311854054.X[P]. 2024-03-15.',
          // inventors: ['王五', '赵六', '钱七'],
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',
          // number: 'ZL202210987654.3',
          // status: '实质审查'
        },
        {
          title: '[3] 张鹏等. 一种在3D模型上模拟展示人流量密度的热力图:CN202410146403.0[P]. 2024-05-14.',
          // inventors: ['张三', '李四'],
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',
          // number: 'ZL202310123456.7',
          // status: '申请中'
        },
        {
          title: '[4] 张鹏等. 一种基于姿态估计的行人异常行为视频识别方法:CN202410211689.6[P]. 2024-06-11.',
          // inventors: ['张三', '李四'],
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',
          // number: 'ZL202310123456.7',
          // status: '申请中'
        },
        {
          title: '[5] 张鹏等. 基于Transformer多头自注意力机制的跨摄像头行人重识别方法:CN202410417693.8[P]. 2024-05-10.',
          // inventors: ['张三', '李四'],
          image: 'https://media.springernature.com/w215h120/springer-static/image/art%3A10.1038%2Fs41593-022-01202-6/MediaObjects/41593_2022_1202_Fig1_HTML.png',
          // number: 'ZL202310123456.7',
          // status: '申请中'
        },

      ]
    }
  }
}
</script>

<style scoped>
.research-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100%;
}

.page-header {
  /* background: rgb(225, 214, 214); */
  color: white;
  padding: 0;
  margin-bottom: 10px;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 10px;
  /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
  color: #6a11cb;
}

.title-underline {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00c9ff, #92fe9d);
  margin: 0 auto 20px;
  border-radius: 2px;
}

.page-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
  color: #6a11cb;
}

.research-tabs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  padding-left: 30px;
}

.paper-list,
.journal-list,
.patent-list {
  padding: 20px;
}

.paper-item,
.journal-item,
.patent-item {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.paper-item:hover,
.journal-item:hover,
.patent-item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.paper-header,
.journal-header,
.patent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.paper-title,
.journal-title,
.patent-title {
  color: #303133;
  margin: 0 10px;
  font-size: 15px;
  font-weight: 600;
}

.journal-title:hover,
.patent-title:hover,
.paper-title:hover {
  color: #6a11cb;
}

.paper-image,
.journal-image,
.patent-image {
  color: #909399;
  font-size: 14px;
  background-color: #f0f2f5;
  /* padding: 4px 10px; */
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.paper-image:hover {
  transform: scale(1.1);
}

.paper-authors,
.journal-authors,
.patent-inventors {
  color: #606266;
  margin-bottom: 10px;
  font-size: 14px;
}

.paper-publication,
.journal-publication,
.patent-info {
  color: #909399;
  font-size: 13px;
  margin-bottom: 15px;
}

.journal-name {
  font-weight: bold;
  color: #409eff;
}

.publication-details {
  color: #606266;
}

.paper-tags {
  margin-top: 10px;
}

.tag-item {
  margin-right: 8px;
}

.journal-description {
  color: #606266;
  line-height: 1.6;
  font-size: 14px;
}

.patent-info {
  display: flex;
  gap: 20px;
}

.patent-number,
.patent-status {
  background-color: #f0f2f5;
  padding: 4px 10px;
  border-radius: 4px;
}
</style>